<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화  
		var cfg = {
		    Chart : {
				Animation : true,
		        PlotBackgroundColor : "#FAFAFA",
				PlotBorderColor:"#A9AEB1",
		        PlotBorderWidth:0.5,
				BackgroundColor:{
					LinearGradient : [0,0,100,500],
					Stops : [
						[0, "#D7E1F3"],
						[1, "#FFFFFF"]
					]
				},
				BorderColor : "#84888B",
				
				Type : "column",
		        Style : {
		            FontSize : "20px"
		        }		
		    },
			Credits : {
				Enabled:false
			},
			
			Colors : ["#7AAAEE","#F06F3E","#AAEE6A","#F0E150","#5DA0A9","#75738B"],
			
		    Legend : {
		    	Layout : "horizontal",			// Legend 모양 설정
				Align : "center",				// Legend 가로 정렬 설정
				VerticalAlign : "bottom"		// Legend 세로 정렬 설정
		    },
			
		    YAxis : {
		        LineColor : "#7F7F7F",
		        TickInterval : 50,
				GridLineDashStyle : "solid",
		        GridLineWidth : 1,
		        GridLineColor : "#C4C9CD",
		        LineWidth : 1,
		        Title : {
		            Text : ""
		        }
		    }
		}
		
		myChart.SetOptions(cfg);
		myChart.Draw();
		myChart.DoSearch("../data/chartdata.xml");
		
		myChartDraw();
		
	});
	
	function myChartDraw() {
		var Type = $("#lineCombo").val();
// 		myChart.RemoveAll();
		
		switch(Type){
		case "LINE_Marker":			
			myChart.SetBaseOptions({
				Type:"line"
			},1);
			
			myChart.SetPlotOptions({
				Series:{
					Stacking:"",
					DataLabels:{
						Enabled:true,
						Align:"center",
						Color : "#333333"
					},
					Marker:{
						Enabled:true
					}
				},
				Line:{
					Step:false
				}
			},1);
			break;

		case "LINE_Stacking_Normal_Marker":					
			myChart.SetBaseOptions({
				Type:"line"
			},1);
			
			myChart.SetPlotOptions({
				Series:{
					Stacking:"normal",
					DataLabels:{
						Enabled:true,
						Align:"center",
						Color : "#333333"
					},
					Marker:{
						Enabled:true
					}
				},
				Line:{
					Step:false
				}
			},1);
			break;

		case "LINE_Stacking_Marker":			
			myChart.SetBaseOptions({
				Type:"line"
			},1);
			
			myChart.SetPlotOptions({
				Series:{
					Stacking:"percent",
					DataLabels:{
						Enabled:true,
						Align:"center",
						Color : "#333333"
					},
					Marker:{
						Enabled:true
					}
				},
				Line:{
					Step:false
				}
			},1);
			break;

		case "SPLINE_Marker":			
			myChart.SetBaseOptions({
				Type:"spline"
			},1);
			
			myChart.SetPlotOptions({
				Series:{
					Stacking:"",
					DataLabels:{
						Enabled:true,
						Align:"center",
						Color : "#333333"
					},
					Marker:{
						Enabled:true
					}
				}
			},1);
			break;

		case "SCATTER":			
			myChart.SetBaseOptions({
				Type:"scatter"
			},1);
			
			myChart.SetPlotOptions({
				Series:{
					Stacking:"",
					DataLabels:{
						Enabled:true,
						Align:"center",
						Color : "#333333"
					},
					Marker:{
						Enabled:true
					}
				}
			},1);
			break;

		case "LINE_Step":			
			myChart.SetBaseOptions({
				Type:"line"
			},1);
			
			myChart.SetPlotOptions({
				Series:{
					Stacking:"normal",
					DataLabels:{
						Enabled:true,
						Align:"center",
						Color : "#333333"
					},
					Marker:{
						Enabled:false
					}
				},
				Line:{
					Step:true
				}
			},1);
			break;

		case "LINE_Step_Marker":			
			myChart.SetBaseOptions({
				Type:"line"
			},1);
			
			myChart.SetPlotOptions({
				Series:{
					Stacking:"normal",
					DataLabels:{
						Enabled:true,
						Align:"center",
						Color : "#333333"
					},
					Marker:{
						Enabled:true
					}
				},
				Line:{
					Step:true
				}
			},1);
			break;
		case "AREA":
			myChart.SetBaseOptions({
				Type:"area"
			},1);
			
			myChart.SetPlotOptions({
				Series:{
					Stacking:"",
					DataLabels:{
						Enabled:true,
						Align:"center",
						Color : "#333333"
					},
					Marker:{
						Enabled:false
					}
				}
			},1);
			break;

		case "AREA_Stacking_Normal":
			myChart.SetBaseOptions({
				Type:"area"
			},1);
			
			myChart.SetPlotOptions({
				Series:{
					Stacking:"normal",
					DataLabels:{
						Enabled:true,
						Align:"center",
						Color : "#333333"
					},
					Marker:{
						Enabled:true
					}
				}
			},1);
			break;

		case "AREA_Stacking":
			myChart.SetBaseOptions({
				Type:"area"
			},1);
			
			myChart.SetPlotOptions({
				Series:{
					Stacking:"percent",
					DataLabels:{
						Enabled:true,
						Align:"center",
						Color : "#333333"
					},
					Marker:{
						Enabled:true
					}
				}
			},1);
			break;

		case "AREASPLINE":
			myChart.SetBaseOptions({
				Type:"areaspline"
			},1);
			
			myChart.SetPlotOptions({
				Series:{
					Stacking:"",
					DataLabels:{
						Enabled:true,
						Align:"center",
						Color : "#333333"
					},
					Marker:{
						Enabled:true
					}
				}
			},1);
			break;
		}
		
		//myChart.RemoveAll() 을 했을 경우,
// 		myChart.DoSearch("../data/chartdata.xml");
		myChart.Draw();
	}
	
</script>
<title>선형 차트 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>	
	<div id="title">선형 차트 예제</div>
	<div id="desc">
		선으로 이루어진 형태의 차트
	</div>

	<div id="functionArea">
		<select class="chartCombo" id="lineCombo" onchange="myChartDraw()">
			<option value="LINE_Marker">심볼 꺽은선</option> 
			<option value="LINE_Stacking_Normal_Marker">누적 심볼 꺽은선</option> 
			<option value="LINE_Stacking_Marker" >100% 누적 심볼 꺽은선</option> 
			<option value="SPLINE_Marker" selected>심볼 부드러운 꺽은선</option> 
			<option value="SCATTER">산점</option> 
			<option value="LINE_Step">계단</option> 
			<option value="LINE_Step_Marker">심볼 계단</option> 
			<option value="AREA">영역</option> 
			<option value="AREA_Stacking_Normal">누적 영역</option> 
			<option value="AREA_Stacking">100% 누적 영역</option> 
			<option value="AREASPLINE">부드러운 영역</option> 
		</select>
	</div>
	
	<div id="viewArea">
		<script type="text/javascript">
			createIBChart("myChart", "1000px", "300px");
		</script>
	</div>
</div>
</body>
</html>